// web/src/app/learn/(dashboard)/(routes)/(root)/page.tsx
import React from 'react';
import {currentUser} from "@/lib/auth";
import {redirect} from "next/navigation";
import {getDashboardCourses} from "@/actions/learn/get-dashboard-courses";
import CoursesList from "@/components/learn/courses-list";
import {Clock} from "lucide-react";
import InfoCard from "@/app/learn/(dashboard)/(routes)/(root)/_components/info-card";

const Page = async () => {
    const user = await currentUser()
    if (!user) return redirect(`/learn`)

    const {
        completedCourses, coursesInProgress
    } = await getDashboardCourses(user.id!)

    return (
        <div className={`p-6 space-y-4`}>
            <div className={`grid grid-cols-1 sm:grid-cols-2 gap-4`}>
                <InfoCard
                    icon={Clock}
                    label={'In Progress'}
                    numberOfItems={coursesInProgress.length}
                />
                <InfoCard
                    icon={Clock}
                    label={'Completed'}
                    numberOfItems={completedCourses.length}
                    variant={'success'}
                />
            </div>
            <CoursesList items={[...completedCourses, ...coursesInProgress]}/>
        </div>
    );
};

export default Page;